<template>
  <div class="mainwrap">
    <div class="middlewrap">
      <div class="container">
        <div class="mybody">
          <div class="aside">
            <h1><strong>推荐</strong></h1>
            <ul>
              <li @click="getAdmittedSinger()">入驻歌手</li>
            </ul>
            <hr />
            <h1><strong>华语</strong></h1>
            <ul>
              <li @click="getElseSinger(7, 1)">华语男歌手</li>
              <li @click="getElseSinger(7, 2)">华语女歌手</li>
              <li @click="getElseSinger(7, 3)">华语组合队/乐队</li>
              <hr />
            </ul>
            <h1><strong>欧美</strong></h1>
            <ul>
              <li @click="getElseSinger(96, 1)">欧美男歌手</li>
              <li @click="getElseSinger(96, 2)">欧美女歌手</li>
              <li @click="getElseSinger(96, 3)">欧美组合队/乐队</li>
              <hr />
            </ul>
            <h1><strong>日本</strong></h1>
            <ul>
              <li @click="getElseSinger(8, 1)">日本男歌手</li>
              <li @click="getElseSinger(8, 2)">日本女歌手</li>
              <li @click="getElseSinger(8, 3)">日本组合队/乐队</li>
              <hr />
            </ul>
            <h1><strong>韩国</strong></h1>
            <ul>
              <li @click="getElseSinger(16, 1)">韩国男歌手</li>
              <li @click="getElseSinger(16, 2)">韩国女歌手</li>
              <li @click="getElseSinger(16, 3)">韩国组合队/乐队</li>
              <hr />
            </ul>
            <h1><strong>其他</strong></h1>
            <ul>
              <li @click="getElseSinger(0, 1)">其他男歌手</li>
              <li @click="getElseSinger(0, 2)">其他女歌手</li>
              <li @click="getElseSinger(0, 3)">其他组合队/乐队</li>
            </ul>
          </div>
          <div class="main">
            <div class="admittedSinger" v-if="admittedSingeeFlag">
              <h1><strong>入驻歌手</strong></h1>
              <div class="admittedSingercubes">
                <router-link
                  :to="`singerdetails/${id}`"
                  class="ab"
                  v-for="({ name, picUrl, id }, index) in admittedSingerArr"
                  :key="index"
                >
                  <img :src="picUrl" alt="" />
                  <p>{{ name }}</p>
                </router-link>
              </div>
            </div>
            <div class="elseSinger" v-else>
              <h1>
                <strong>{{ singlistdetail }}</strong>
              </h1>
              <div class="elseSingercubes">
                <router-link
                  :to="`singerdetails/${id}`"
                  class="aa"
                  v-for="({ name, picUrl, id }, index) in elseSingerArr"
                  :key="index"
                >
                  <img :src="picUrl" alt="" />
                  <p>{{ name }}</p>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import myNavbar from "../components/myNavbar.vue";
export default {
  components: { myNavbar },
  data() {
    return {
      admittedSingerArr: null,
      elseSingerArr: null,
      singlistdetail: "",
      englishLetters: [],
      admittedSingeeFlag: true,
    };
  },
  methods: {
    getAdmittedSinger() {
      this.admittedSingeeFlag = true;
      var url = "artist/list?cat=5001";
      var url2 = "http://localhost/getAdmittedSinger.json";
      this.axios.get(url).then(res => {
        // console.log("getAdmittedSinger:" + JSON.stringify(res));
        this.admittedSingerArr = res.data.artists;
        // console.log("admitted:");
      });
    },
    getElseSinger(area, type) {
      this.admittedSingeeFlag = false;
      var url = `/artist/list?type=${type}&area=${area}`;
      // console.log(url);
      var url1 = `artist/list?cat=`;
      var url2 = "http://localhost/getElseSinger.json";
      this.axios.get(url).then(res => {
        // console.log("ad:", res);
        // console.log(" getElseSinger:" + JSON.stringify(res));
        this.elseSingerArr = res.data.artists;
        // this.singlistdetail = this.$refs.li.innerHTML;
        // console.log("else");
      });
    },
  },
  mounted() {
    this.getAdmittedSinger();
  },
};
</script>
<style lang="scss" scoped>
.mainwrap {
  width: 100%;
  display: flex;
}
.middlewrap {
  width: 980px;
  overflow: hidden;
  /* min-height: 1500px; */
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background-color: #fff;
}
.container {
  margin: 0 auto;
  user-select: none;
}
.mybody {
  display: flex;
  justify-content: space-between;
  .aside {
    width: 30%;
    padding-left: 10px;
    h1 {
      font-size: 20px;
      margin-top: 25px;
    }
    ul {
      margin-top: 10px;
    }
    li {
      margin-top: 15px;
      &:hover {
        background-color: rgb(99, 105, 99);
        color: white;
      }
    }
  }
  .main {
    width: 70%;
    .admittedSinger {
      h1 {
        font-size: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid red;
      }
      .admittedSingercubes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .ab {
          margin: 5px 5px 20px 0px;
          width: 100px;

          img {
            width: 100%;
            height: 90%;
          }
          p {
            padding: 5px;
            text-align: center;
          }
        }
      }
    }
    .elseSinger {
      h1 {
        font-size: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid red;
      }
      p {
        padding: 3px;
        background-color: red;
        span {
          margin: 5px;
          padding: 5px;
          color: white;

          &.hover {
            background-color: black;
          }
        }
      }
      .elseSingercubes {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .aa {
          margin: 5px 5px 20px 0px;
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 90%;
          }
          p {
            padding: 5px;
            text-align: center;
            background-color: white;
          }
        }
      }
    }
  }
}
</style>
